<script>
import '@/styles/style.css';
import useInitialize from 'hooks/useInitialize';
import useCollapse from 'hooks/useCollapse';

import NewProject from 'comps/NewProject.vue';
import ProjectList from 'comps/ProjectList.vue';
import TaskPanel from 'comps/TaskPanel.vue';

// import { addProjectToSchedules } from 'utils/utils';
export default {
  components: {
    NewProject,
    ProjectList,
    TaskPanel,
  },
  setup() {
    const { collapseCtrl } = useCollapse();

    const { state } = useInitialize();

    let add_project = (project) => {
      state.projects.push(JSON.parse(JSON.stringify(project)));
      localStorage.setItem('projects', JSON.stringify(state.projects));
      // for enumerable and non-enumerable properties
      // for (const prop of Object.getOwnPropertyNames(state.schedules)) {
      //   delete state.schedules[prop];
      // }
      // state.projects.forEach((project) => {
      //   addProjectToSchedules(project, state.schedules);
      //   console.log(state.schedules);
      // });
    };

    let remove_project = (id) => {
      state.projects = state.projects.filter((project) => project.uuid !== id);
      localStorage.setItem('projects', JSON.stringify(state.projects));
      // for (const prop of Object.getOwnPropertyNames(state.schedules)) {
      //   delete state.schedules[prop];
      // }
      // state.projects.forEach((project) => {
      //   addProjectToSchedules(project, state.schedules);
      //   console.log(state.schedules);
      // });
    };
    return {
      collapseCtrl,
      state,

      add_project,
      remove_project,
    };
  },
};
</script>

<template>
  <div class="flex">
    <div class="form-wrapper">
      <task-panel :collapseCtrl="collapseCtrl" :state="state"></task-panel>
      <project-list :collapseCtrl="collapseCtrl" :state="state" @remove-project="remove_project"></project-list>
    </div>
    <div class="form-wrapper">
      <new-project :collapseCtrl="collapseCtrl" @add-project="add_project"></new-project>
    </div>
  </div>
</template>
